<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗问答系统</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div class="container">
        <h1>智能医疗咨询</h1>
        <div class="input-section">
            <select id="department" class="department-select">
                <option value="妇产科">妇产科</option>
                <option value="儿科">儿科</option>
                <option value="内科">内科</option>
            </select>
            <textarea id="question" placeholder="请输入您的医疗问题（至少10个字）..."></textarea>
            <button id="submit-btn" onclick="submitQuestion()">提交咨询</button>
        </div>
        <div class="response-section">
            <h2>专家解答</h2>
            <div id="loading" class="loading" style="display: none;">正在生成回答，请稍候...</div>
            <div id="error" class="error" style="display: none;"></div>
            <div id="answer" class="answer-box"></div>
            <div class="sources">
                <h3>参考资料</h3>
                <ul id="sources-list"></ul>
            </div>
        </div>
    </div>

    <script>
        async function submitQuestion() {
            const question = document.getElementById('question').value;
            const department = document.getElementById('department').value;
            const submitBtn = document.getElementById('submit-btn');
            const loading = document.getElementById('loading');
            const error = document.getElementById('error');
            const answer = document.getElementById('answer');
            const sourcesList = document.getElementById('sources-list');
            
            if (question.length < 10) {
                error.textContent = '请输入至少10个字的详细问题描述';
                error.style.display = 'block';
                return;
            }

            // 重置状态
            error.style.display = 'none';
            answer.innerHTML = '';
            sourcesList.innerHTML = '';
            loading.style.display = 'block';
            submitBtn.disabled = true;

            try {
                const response = await fetch('/api/ask', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        question: question,
                        department: department
                    })
                });

                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.detail || '服务器响应异常');
                }

                const data = await response.json();
                
                answer.innerHTML = marked.parse(data.answer);
                sourcesList.innerHTML = data.sources.map(s => `<li>${s}</li>`).join('');
            } catch (error) {
                console.error('请求失败:', error);
                error.textContent = error.message || '提问失败，请稍后重试';
                error.style.display = 'block';
            } finally {
                loading.style.display = 'none';
                submitBtn.disabled = false;
            }
        }
    </script>
    <script src="https://js.cybozu.cn/markedjs/v0.3.5/marked.min.js"></script>
</body>
</html>